import { FC } from 'react'
import styles from './styles.module.less'

const Solution: FC = () => {
    return <>

        <section className={styles.col1}>
            <div className={styles['background-media']}></div>
            <div className={styles['background-color']}></div>
            <div className={styles.content}>
                <div className={styles.row}>
                    <div className={`${styles.left} `} id="col1-left">
                        <div className={styles.leftWrap}>
                            <h1>
                                <span style={{ fontSize: 74, color: '#fff', fontWeight: 'normal' }}>智能运维产品家族</span>
                            </h1>
                            <div className={styles.desc}>
                                <span style={{ fontSize: 18 }}>打造企业级智能运维管理平台，帮助企业更高效地管理和维护其复杂的IT系统，提高系统的可用性和稳定性，降低运维成本。</span>
                            </div>
                            <div className={styles.btn}>
                                <button>申请试用</button>
                            </div>
                        </div>
                    </div>
                    <div className={styles.right} style={{ width: '46.4%' }} id="col1-right">
                        <div className={styles.rightWrap}>
                            <img
                                className={styles.front_image}
                                src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cDovLzVlZTFlY2Y0YzVkOTEudDc0LnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAyMC8wNi80YTkwZDQ3YjdhZTczODk1ODRkMjJlMTI2Y2ViOTg5ZC5wbmc_p_p100_p_3D.png"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </>
}

export default Solution;